<template>
    <div>
        <h3 style="margin-left: 20px;">
            审批
        </h3>
        <div style="display: flex;">
            <el-menu default-active="2"  class="el-menu-vertical-demo" @select="handleSelect" @open="handleOpen" @close="handleClose" background-color="rgb(250, 251, 252)" active-text-color="black">
                        <el-menu-item index="1">
                            <i class="el-icon-edit"></i>
                            <span slot="title">申请</span>
                        </el-menu-item>
                        <el-menu-item index="2" >
                            <i class="el-icon-message"></i>
                            <span slot="title">待办</span>
                        </el-menu-item>
            </el-menu>
            <div class="showA"  v-if="showA" style="width: 100%; border-top: 1px solid rgb(244, 245, 247); padding-top: 20px;padding-left: 20px;display: flex;justify-content: space-evenly;">
                <el-button  icon="el-icon-s-order" type="primary">请假审批</el-button>
                <el-button  icon="el-icon-s-order" type="primary">报销审批</el-button>
                <el-button  icon="el-icon-s-order" type="primary">主要按钮</el-button>
                <el-button  icon="el-icon-s-order" type="primary">主要按钮</el-button>
                <el-button  icon="el-icon-s-order" type="primary">合同审批</el-button>
            </div>
            <div v-if="showB">
                <div style="display: flex;margin-left: 10px;">
                    <el-input style="margin-left: 10px;" v-model="input" placeholder="请输入内容"></el-input>
                    <el-button style="margin-right: 20px;" icon="el-icon-search" circle></el-button>
                    <div style="width: 100px;text-align: center;padding-top: 10px;">显示：</div>
                    <el-button type="primary">待我审批</el-button>
                </div>
                <el-card style="width: 85rem;height: 40rem; margin-left: 20px;margin-top: 20px;overflow: auto;">
                    <div>
                        <el-table :data="tableData" border style="width: 100%;">
                            <el-table-column fixed prop="id" label="序号" align="center"></el-table-column>
                            <el-table-column prop="Applican" label="审批内容" align="center"></el-table-column>
                            <el-table-column prop="status" label="提交人" align="center"></el-table-column>
                            <el-table-column prop="section" label="提交部门" align="center"></el-table-column>
                            <el-table-column prop="date" label="提交时间" align="center"></el-table-column>
                            <el-table-column fixed="right" label="操作" align="center">
                                <template slot-scope="scope">
                                    <el-button @click="handleClick(scope.row)" type="text" size="small">同意</el-button>
                                    <el-button @click="turnDown(scope.row)" type="text" size="small">拒绝</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                    
                </el-card>
                <div style="margin-bottom: 0px;display: flex;justify-content: flex-end;margin-top: 20px;">
                            <el-pagination background
                                    @size-change="handleSizeChange"
                                    @current-change="handleCurrentChange"
                                    :current-page="params.page"
                                    :page-sizes="arr"
                                    :page-size="params.size"
                                    layout="total, sizes, prev, pager, next, jumper"
                                    :total="count">
                            </el-pagination>
                </div>
                
            </div>
        </div>
    </div>
</template>
<script>
export default{
    data(){
        return{
            showA: true,
            showB: false,
            count1:10,
            //默认每页几条size page-size，page当前页current-page
            params:{name: '',page:1,size:5},
            //总记录数
            count:10,
            //每页几条
            arr:[1,3,5,7,9,10],
            tableData: [{
          id: '2016-05-02',
          Applican: '王小虎',
          status: '上海',
          section: '普陀区',
          date: '上海市普陀区金沙江路 1518 弄',
        }, {
          id: '2016-05-04',
          Applican: '王小虎',
          status: '上海',
          section: '普陀区',
          date: '上海市普陀区金沙江路 1517 弄',
        }, {
          id: '2016-05-01',
          Applican: '王小虎',
          status: '上海',
          section: '普陀区',
          date: '上海市普陀区金沙江路 1519 弄',
        }, {
          id: '2016-05-03',
          Applican: '王小虎',
          status: '上海',
          section: '普陀区',
          date: '上海市普陀区金沙江路 1516 弄',
        },
        {
          id: '2016-05-01',
          Applican: '王小虎',
          status: '上海',
          section: '普陀区',
          date: '上海市普陀区金沙江路 1519 弄',
        },{
          id: '2016-05-01',
          Applican: '王小虎',
          status: '上海',
          section: '普陀区',
          date: '上海市普陀区金沙江路 1519 弄',
        },{
          id: '2016-05-01',
          Applican: '王小虎',
          status: '上海',
          section: '普陀区',
          date: '上海市普陀区金沙江路 1519 弄',
        },{
          id: '2016-05-01',
          Applican: '王小虎',
          status: '上海',
          section: '普陀区',
          date: '上海市普陀区金沙江路 1519 弄',
        },{
          id: '2016-05-01',
          Applican: '王小虎',
          status: '上海',
          section: '普陀区',
          date: '上海市普陀区金沙江路 1519 弄',
        },{
          id: '2016-05-01',
          Applican: '王小虎',
          status: '上海',
          section: '普陀区',
          date: '上海市普陀区金沙江路 1519 弄',
        },{
          id: '2016-05-01',
          Applican: '王小虎',
          status: '上海',
          section: '普陀区',
          date: '上海市普陀区金沙江路 1519 弄',
        },{
          id: '2016-05-01',
          Applican: '王小虎',
          status: '上海',
          section: '普陀区',
          date: '上海市普陀区金沙江路 1519 弄',
        },{
          id: '2016-05-01',
          Applican: '王小虎',
          status: '上海',
          section: '普陀区',
          date: '上海市普陀区金沙江路 1519 弄',
        },]  
        }
    },
    methods:{
        handleSelect(index){
            switch(index){
                case '1':
                    this.showA = true
                    this.showB = false
                    break;
                case '2':
                    this.showA = false
                    this.showB = true
                    break;
                default:
                    console.log("error")
                    break;
            }
        }
    }
}
</script>
<style scoped>
.showA button{
    height: 50px;
    width: 250px;
    padding: 0px;
    font-size: 20px;
}
.el-menu-demo,.el-menu--horizontal,.el-menu{
  background-color:rgb(255, 255, 255)!important;
}
</style>